<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue生命周期</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm = new Vue({
                el: "#itany",
                data:{
                    msg: 'welcome to itany',
                },
                methods:{
                    update() {
                        this.msg = "还原来到南京网博"
                    },
                    destory(){
                        vm.$destroy();
                    }
                },
                beforeCreate(){
                    alert("组件实例刚刚创建,还未进行数据观测和事件的配置")
                },
                created(){
                    alert("实例已经创建完成,并且已经进行数据观测和事件配置")
                },
                beforeMount(){
                    alert("模板编译之前,还没有挂载")
                },
                mounted(){
                    alert("模板编译之后,已经挂载,此时才能渲染页面,才能看到页面的数据的展示")
                },
                updated(){
                    alert("组件更新之前")
                },
                beforeDestroy(){
                    alert("组件销毁之前")
                },
                destroyed(){
                    alert("组件销毁之后")
                },
            })
        }
    </script>
</head>
<body>
    <div id="itany">
        {{ msg }}
        <br>
        <button @click="update">更新数据</button>
        <button @click="destory">销毁数据</button>
    </div>
</body>
</html>